<template>
  <div
    ref="pdom"
    class="cam-box"
    v-show="_showed"
    onmousedown="javascript:hMouseDown(event);"
    :style="tmpstyle"
  >
    <label style="letter-spacing: 2px">{{ datCamName }}</label>
    <div class="btn bclose" @click="hClose">Ｘ</div>
    <div ref="refPl" class="player" id="player9"></div>
    <!-- <div class="btn b" @click="hOpenAudio">广播</div> -->
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, nextTick, computed, reactive, watch, ref, toRefs } from 'vue'

import { useStore } from 'vuex'

import { ElMessage } from 'element-plus'

const store = useStore()

// const {
// 	datCamName,
// 	datWsPath
// } = toRefs(store.getters);
const datWsPath = computed(() => store.getters.datWsPath)
const datCamName = computed(() => store.getters.datCamName)
//_getList = 'GetHIKCam.ashx?title=GetCamList';

//dev.cameraIndexCode

//播放句柄
let _player = null
const _showed = ref(false)
const refPl = ref(null)
watch(refPl, (dom) => {
  hInit()
})
let _h2 = -1
const hInit = () => {
  clearTimeout(_h2)
  _h2 = setTimeout(function () {
    hPlugin()
  }, 1000 * 3)
}
const pdom = ref(null)
watch(_showed, (s) => {
  if (s) {
    pdom.value.style.transform = 'translate(650px,50px)'
  }
  console.log(pdom.value.style)
  //tmpstyle.value = "transform: translate(0px, 0px);";
  if (!s) {
  }
})

const hPlugin = () => {
  if (_player != null || refPl.value == null) {
    return
  }
  _player = new window.JSPlugin({
    szId: 'player9',
    szBasePath: './',
    iMaxSplit: 1,
    iCurrentSplit: 1,
    //openDebug: true,
    oStyle: {
      borderSelect: '#FFCC00'
    }
  })
  _player.JS_Resize()

  // 事件回调绑定
  _player.JS_SetWindowControlCallback({
    windowEventSelect: function (iWndIndex) {
      //插件选中窗口回调
      console.log('选中窗口: ', iWndIndex)
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.log('插件错误: ', iWndIndex, iErrorCode, oError)
    },
    windowEventOver: function (iWndIndex) {
      //鼠标移过回调
      //console.log(iWndIndex);
    },
    windowEventOut: function (iWndIndex) {
      //鼠标移出回调
      //console.log(iWndIndex);
    },
    windowEventUp: function (iWndIndex) {
      //鼠标mouseup事件回调
      //console.log(iWndIndex);
    },
    windowFullCcreenChange: function (bFull) {
      //全屏切换回调
      console.log('全屏切换回调: ', bFull)
    },
    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
      //首帧显示回调
      console.log('首帧显示回调: ', iWndIndex, iWidth, iHeight)
    },
    performanceLack: function () {
      //性能不足回调
      console.log('性能不足回调: ')
    }
  })

  let splitNum = 1 //1:1x1,2:2x2,3:3x3
  _player.JS_ArrangeWindow(splitNum).then(
    () => {
      console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
      _player.JS_Resize()
    },
    (e) => {
      console.error(e)
    }
  )

  window.addEventListener('resize', () => {
    _player?.JS_Resize()
  })
}

const tmpstyle = ref('')
watch(datCamName, (n) => {
  if (!n) {
    //_showed.value = false;
    return
  }
  if (store.state.page_curr == 'set') {
  }
  _showed.value = true
  console.log('准备预览', n)
  store.dispatch('asyncOpenCam', n)
})

watch(datWsPath, (ws) => {
  if (!ws) {
    return
  }
  hRealPlay(ws)
})
const hClose = () => {
  store.commit('hOnPlayCam', '')
  _showed.value = false

  hStopPlay()
}
//预览'ws://10.19.147.22:559/EUrl/q2jQie4';
const hRealPlay = (url) => {
  if (_player == null) {
    hInit()
  }
  _showed.value = true
  //url = url.replaceAll("ws://", "wss://");
  let index = _player.currentWindowIndex || 0
  console.log('预览', url)
  _player
    .JS_Play(
      url,
      {
        playURL: url,
        mode: 1
      },
      index
    )
    .then(
      () => {
        console.log('预览 成功')
        _player.JS_Resize()
      },
      (e) => {
        ElMessage.error('预览 异常.' + e)
        console.error('预览 异常', e)
      }
    )
}

//停止预览
const hStopPlay = () => {
  //JS_StopRealPlayAll
  _player.JS_Stop().then(
    () => {
      console.log('预览 停止成功')
    },
    (e) => {
      console.error(e)
    }
  )
  store.state.camName = ''
}

//全屏
const hFullScreen = () => {
  _player.JS_FullScreenDisplay(true).then(
    () => {
      console.log(`wholeFullScreen success`)
    },
    (e) => {
      console.error(e)
    }
  )
}

const hOpenAudio = () => {
  store.commit('hShowAudio', datCamName.value)
  //emit('onOpenAudio', datCamName.value);
}

//属性导出
//使用方法 ref="rdom" rdom.value.hFn()
defineExpose({
  hRealPlay
})

//触发
const hOnFn = (t) => {
  emit('onFn', t)
}
//事件抛出
//外层绑定@onFn="hOnFn"
const emit = defineEmits(['onFn', 'onOpenAudio'])

//属性定义
//数据绑定v-bind:dat="dat"
//const dat=ref({});
const props = defineProps({
  realplay: {
    type: String
  }, //'ws://10.19.147.22:559/EUrl/q2jQie4';
  mode: {
    type: Number,
    default: 1
  } //0：普通模式，1:高级模式
})
onUnmounted(() => {
  _player = null
})
onMounted(() =>
  nextTick(() => {
    hInit()
  })
)
</script>

<style scoped lang="scss">
.cam-box {
  position: absolute;
  width: 426px;
  height: 380px;
  z-index: 2;
  top: 200px;
  left: 400px;
  color: #eee;
  font-size: 20px;
  background-image: url(/imgs/bg/bgvideo.png);
  background-size: 100% 100%;

  .bclose {
    position: absolute;
    height: 30px;
    width: 26px;
    line-height: 16px;
    right: 12px;
    top: 2px;
    color: #eee;
    opacity: 1;
    z-index: 1;
    background: rgba(30, 58, 88, 0.83);
    transform: scaleY(0.8);
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-family: '';
    border: 1px solid #7e8795;
  }

  .bclose:hover {
    color: red;
  }

  .btn.b {
    font-size: 18px;
    position: absolute;
    width: calc(100% - 20px);
    height: 38px;
    right: 10px;
    bottom: 6px;

    line-height: 24px;

    background-image: url(/imgs/bg/btnb.png);
    background-size: 100% calc(100% + 2px);
    background-position: center;
    letter-spacing: 6px;
    color: #98e8fb;
    font-weight: bold;
  }

  .btn.b:hover {
    color: #04ff00;
  }

  label {
    font-size: 14px;
    letter-spacing: 2px;
  }
}

.player {
  width: calc(100% - 6px);
  height: 322px;
  margin: 0 auto;
  background-color: #222;
}
</style>
